<template>
	<!-- 图文导航 -->
	<view :class="datas.imageList.length > 4 ? 'graphicnavigations' : 'graphicnavigation'" :style="getStyle">

		<!-- 4个及以下项目保持原样 -->
		<template v-if="datas.imageList.length <= 4">
			<section class="defaultNavigation" :style="{
	      	display: datas.imgStyle === 0 ? 'flex' : '-webkit-box',
	      	'flex-wrap': datas.imgStyle === 0 ? 'wrap' : 'nowrap',
	      	'justify-content':
	      	datas.imgStyle === 0 ? 'space-evenly' : 'space-around',
	      	'overflow-x': datas.imgStyle === 0 ? '' : 'scroll',
	      }">

				<!-- 导航 -->
				<view class="navigationList" @click="click(index)" v-if="datas.titleType === 'down'"
					:class="datas.titleType=='left' || datas.titleType=='right'?'LR_title':''"
					v-for="(item, index) in datas.imageList" :key="index" :style="[get_navstyle(item)]">

					<view v-if="datas.titleType== 'up' || datas.titleType== 'left'">
						<text :style="{color: datas.textColor, textAlign:datas.titleType=='left'?'left':'center',
	      			'font-size': datas.textSize + 'px', height: datas.textHeight + 'px', 'line-height': datas.textHeight + 'px',
	      		}">{{ item.text }}</text>

						<text class="title2"
							v-if="datas.title2=='1' && (datas.titleType === 'up' || datas.titleType== 'left')" :style="{
	      				color: datas.text2Color,
	      				textAlign:datas.titleType=='left'?'left':'center',
	      				'font-size': datas.text2Size + 'px',
	      				height: datas.text2Height + 'px',
	      				'line-height': datas.text2Height + 'px',
	      			}">{{ item.text2 }}</text>

					</view>

					<!-- 所有的图片 -->
					<uni-badge text="1" :text="item.badge" absolute="rightTop" :offset="badge_xy">
						<image :src="item.src" alt="默认图片" v-show="datas.navigationType === 0"
							:style="{ 'border-radius': datas.img_borderRadius + '%' , 'width': datas.imgSize + 'vh', 'height': datas.imgSize + 'vh'  }" />
					</uni-badge>
					<!-- <image v-else :src="item.src" alt="默认图片" v-show="datas.navigationType === 0"
	      	 			:style="{ 'border-radius': datas.img_borderRadius + '%' , 'width': datas.imgSize + 'vh', 'height': datas.imgSize + 'vh'  }" />
	      	-->
					<!-- 文字 -->
					<view v-if="datas.titleType === 'down'">
						<text :style="{
	      				color: datas.textColor,
	      				textAlign:datas.titleType=='right'?'left':'center',
	      				'font-size': datas.textSize + 'px',
	      				height: datas.textHeight + 'px',
	      				'line-height': datas.textHeight + 'px',
	      			}">{{ item.text }}</text>

						<text class="title2" :style="{
	      				color: datas.text2Color,
	      				textAlign:datas.titleType=='right'?'left':'center',
	      				'font-size': datas.text2Size + 'px',
	      				height: datas.text2Height + 'px',
	      				'line-height': datas.text2Height + 'px',
	      			}" v-if="datas.title2=='1' && (datas.titleType === 'down' || datas.titleType === 'right')">{{ item.text2 }}</text>
					</view>

				</view>

				<view class="navigationList1" @click="click(index)" v-if="datas.titleType === 'right'"
					:class="datas.titleType=='left' || datas.titleType=='right'?'LR_title1':''"
					v-for="(item, index) in datas.imageList" :key="index" :style="[get_navstyle(item)]">

					<!-- 所有的图片 -->
					<!-- <uni-badge text="1" :text="item.badge" absolute="rightTop" :offset="badge_xy"> -->

					<image :src="item.src" alt="默认图片" v-show="datas.navigationType === 0"
						style="width: 120rpx; height: 80rpx; padding: 2rpx 0 7rpx 25rpx"
						:style="{ 'border-radius': datas.img_borderRadius + '%' }" />

					<!-- </uni-badge> -->
					<!-- <image v-else :src="item.src" alt="默认图片" v-show="datas.navigationType === 0"
	      	 			:style="{ 'border-radius': datas.img_borderRadius + '%' , 'width': datas.imgSize + 'vh', 'height': datas.imgSize + 'vh'  }" />
	      	-->
					<!-- 文字 -->
					<view>
						<text style="margin-left: 20rpx;" :style="{
	      				color: datas.textColor,
	      				textAlign:datas.titleType=='right'?'left':'center',
	      				'font-size': datas.textSize + 'px',
	      				height: datas.textHeight + 'px',
	      				'line-height': datas.textHeight + 'px',
	      			}">{{ item.text }}</text>

						<!-- <text class="title2" :style="{
	      				color: datas.text2Color,
	      				textAlign:datas.titleType=='right'?'left':'center',
	      				'font-size': datas.text2Size + 'px',
	      				height: datas.text2Height + 'px',
	      				'line-height': datas.text2Height + 'px',
	      			}" v-if="datas.title2=='1' && (datas.titleType === 'down' || datas.titleType === 'right')">{{ item.text2 }}</text> -->
					</view>

				</view>

			</section>
		</template>

		<!-- 大于4个项目的新布局 -->
		<template v-else>
			<section class="defaultNavigation">
				<view class="navigation-grid">
					<view class="navigation-row">
						<view class="navigationList" v-for="(item, index) in displayItems" :key="index"
							@click="isMoreButton(index) ? toggleExpand() : click(getRealIndex(index))">
							<template v-if="isMoreButton(index)">
								<image src="/static/icon/arrow.png" alt="查看更多" mode="aspectFit"
									:style="{ transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)' }" />
								<text>{{ expanded ? '收起' : '查看更多' }}</text>
							</template>
							<template v-else>
								<uni-badge :text="item.badge" absolute="rightTop" :offset="badge_xy">
									<image :src="item.src" alt="默认图片" mode="aspectFit" />
								</uni-badge>
								<text>{{ item.text }}</text>
							</template>
						</view>
					</view>
				</view>
			</section>
		</template>

	</view>
</template>

<script>
	export default {
		name: 'graphicnavigation',
		props: {
			datas: Object,
		},
		data() {
			return {
				mainStyle: "",
				badge_xy: [10, 10],
				badges: [],
				mainStyle: "",
				badge_xy: [10, 10],
				badges: [],
				expanded: false,
			}
		},
		beforeCreate() {
			// this.mainStyle=this.$comm.getCss(this.datas);
		},

		computed: {
			displayItems() {
				if (!this.datas || !this.datas.imageList) return [];
				const items = [...this.datas.imageList];

				// 4个及以下项目直接返回
				if (items.length <= 4) return items;

				// 8个及以下项目时，不需要查看更多按钮
				if (items.length <= 8) return items;

				const moreButton = {
					text: '查看更多',
					isMore: true,
					src: '/static/icon/arrow.png'
				};

				if (this.expanded) {
					// 展开状态：显示所有项目，但保持更多按钮在第8位
					const firstPart = items.slice(0, 7);
					const lastPart = items.slice(7);
					return [...firstPart, moreButton, ...lastPart];
				} else {
					// 收起状态：只显示前7个项目加更多按钮
					return [...items.slice(0, 7), moreButton];
				}
			},
			getStyle() {
				if (this.datas) {
					let s = {};
					Object.assign(s, this.datas);
					delete s["image-list"];
					this.mainStyle = this.$comm.getCss(s);
					// console.log("getStyle", this.mainStyle);
				}
				return this.mainStyle;
			}
		},
		created() {
			console.log(this.datas, '--------graphicnavigation')
			// console.log(this.datas.imageList, '--------graphicnavigation')
		},
		methods: {
			isMoreButton(index) {
				return index === 7;
			},
			getRealIndex(index) {
				// 计算真实的数组索引（跳过"查看更多"按钮）
				return index >= 7 ? index + 1 : index;
			},
			toggleExpand() {
				this.expanded = !this.expanded;
			},
			badge(index, num) {
				console.log("badge", num);

				let self = this;
				this.$nextTick(() => {
					self.datas.imageList[index].badge = num;

					self.$forceUpdate()
				})
			},
			get_titleType() {
				let t = '0';
				if (this.datas.hasOwnProperty("titleType")) {
					t = this.datas.titleType;
				}
				console.log("get_titleType", t);
				return t;
			},
			is_title2() {
				let t = false;
				if (this.datas.hasOwnProperty("title2")) {
					this.datas.title2 == '1' ? true : false;
				}
				return t;
			},
			get_navstyle(d) {
				let s = {
					width: this.datas.imgStyle === 0 ? '18%' : 375 / this.datas.showSize - 5 + 'rpx',
					backgroundColor: this.datas.itembgColor,
					boxShadow: this.datas.itemBoxShow,
					// border: this.datas.itemBorder != '' ?
					// 	'1px ' + this.datas.itemBorder + ' ' + this.datas.itemBorderColor : '',
					borderRadius: this.datas.itemborderRadius != 0 ? this.datas.itemborderRadius + 'rpx' : '0',
				}
				// if (this.datas.imgStyle == 0) {
				//   s["margin"] = 'unset'
				// }
				// console.log(s);
				return s;
			},

			click(index) {
				let self = this
				console.log("graphicnavigation->index", index)
				console.log("graphicnavigation->click", this.datas.imageList[index])
				if (index >= 9) {
					index = index - 2
				}
				if (!this.datas.imageList[index].http.externalLink) {
					this.$boya.msg('敬请期待')
				} else {
					this.$emit("nav", {
						type: "magiccube",
						data: this.datas.imageList[index]
					});
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.graphicnavigations {
		position: relative;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		font-weight: bold;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		box-shadow: 3rpx 0 8rpx rgba(0, 0, 0, 0.2);

		.defaultNavigation {
			// overflow-x: scroll;
			justify-content: space-evenly;

			&::-webkit-scrollbar {
				height: 1px;
			}

			&::-webkit-scrollbar-thumb {
				background-color: #155bd4;
			}

			/deep/.el-collapse-item__header,
			/deep/.el-collapse-item__wrap {
				border-bottom: 0 !important;
			}

			.LR_title {
				display: flex !important;
				flex-direction: row !important;

				view {
					padding: 0px 2px;
					min-width: 80px;
				}

				image {
					margin: 0px;
				}

				width: auto !important;
				padding: 5px;
			}

			.LR_title1 {
				display: flex !important;
				flex-direction: row !important;

				image {
					margin: 0px;
				}

				width: 295rpx !important;
			}

			/* 导航 */
			.navigationList {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 2px 0px;

				image {
					margin-top: 5px;
					width: 45px;
					height: 45px;
				}

				view {
					font-size: 12px;
					margin-top: 2px;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-align: center;
					box-sizing: border-box;

					text {
						display: block;
					}
				}
			}

			.navigationList1 {
				display: flex;
				align-items: center;
				flex-direction: column;
				margin: 2px 0px;
				background-color: white;
				padding: 20rpx 12rpx;
				margin: 0 13rpx;

				image {
					margin-top: 5px;
					width: 45px;
					height: 45px;
				}

				view {
					font-size: 12px;
					margin-top: 2px;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-align: center;
					box-sizing: border-box;

					text {
						display: block;
					}
				}
			}
		}
	}

	.graphicnavigation {
		position: relative;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		font-weight: bold;
		// font-size: 80rpx;

		/* 默认导航 */
		.defaultNavigation {
			// overflow-x: scroll;
			justify-content: space-evenly;

			&::-webkit-scrollbar {
				height: 1px;
			}

			&::-webkit-scrollbar-thumb {
				background-color: #155bd4;
			}

			/deep/.el-collapse-item__header,
			/deep/.el-collapse-item__wrap {
				border-bottom: 0 !important;
			}

			.LR_title {
				display: flex !important;
				flex-direction: row !important;

				view {
					padding: 0px 2px;
					min-width: 80px;
				}

				image {
					margin: 0px;
				}

				width: auto !important;
				padding: 5px;
			}

			.LR_title1 {
				display: flex !important;
				flex-direction: row !important;

				image {
					margin: 0px;
				}

				width: 295rpx !important;
			}

			/* 导航 */
			.navigationList {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 2px 0px;

				image {
					margin-top: 5px;
					width: 45px;
					height: 45px;
				}

				view {
					font-size: 12px;
					margin-top: 2px;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-align: center;
					box-sizing: border-box;

					text {
						display: block;
					}
				}
			}

			.navigationList1 {
				display: flex;
				align-items: center;
				flex-direction: column;
				margin: 2px 0px;
				background-color: white;
				padding: 20rpx 12rpx;
				margin: 0 13rpx;

				image {
					margin-top: 5px;
					width: 45px;
					height: 45px;
					filter: drop-shadow(0 15rpx 10rpx rgba(0, 0, 0, 0.15));
				}

				view {
					font-size: 12px;
					margin-top: 2px;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-align: center;
					box-sizing: border-box;

					text {
						display: block;
					}
				}
			}
		}
	}

	.navigation-grid {
		width: 100%;
		background: #fff;
		padding: 10rpx 0;
		box-sizing: border-box;

		.navigation-row {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			margin: 0;

			.navigationList {
				width: 25%;
				height: 160rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				padding: 10rpx;
				box-sizing: border-box;
				margin: 0;

				image {
					width: 80rpx;
					height: 80rpx;
					filter: drop-shadow(0 15rpx 10rpx rgba(0, 0, 0, 0.15));
				}

				text {
					font-size: 26rpx;
					color: #333;
					text-align: center;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					line-height: 1.2;
					padding: 0 5rpx;
				}
			}
		}
	}
</style>